<script setup>
import SecondSon from '@/components/SecondSon.vue'
import {ref, provide} from "vue";
// 如果中间组件也提供一个provide，底层组件怎么识别
const miCount = ref(20)
provide('countKey', miCount)

// 给子组件提供一个修改数据的方法
provide('sonChangeCount2', (newCount) => {
  miCount.value = newCount
})
</script>

<template>
  <div class="first-son">
    第一层组件,即中间组件展示的值为{{miCount}}
    <SecondSon></SecondSon>
  </div>
</template>

<style scoped>
.first-son {
  background: grey;
  width: 400px;
  height: 400px;
}
</style>

